<!-- 数据详情 -->

<template>
  <div>
    <div class="content">
      <!-- <div class="box_top">
        <img class="picture" :src="baseUrl + selectData.realisticPictureList[0].path" alt />
        <h3 class="title">{{selectData.name}}</h3>
        <div class="top_icon">
          <span class="title_icon_one">{{selectData.municipalityName}}</span>
          <span class="title_icon_two">{{selectData.length}}</span>
        </div>
        <div class="left_bottom">
          <i class="el-icon-location-outline"></i>
          <span>{{selectData.municipalityName + selectData.regionName + selectData.name}}</span>
        </div>
      </div> -->
      <div class="box-newTop box_top">
        <img class="picture" :src="baseUrl + selectData.realisticPictureList[0].path" alt />
        <div class="box-top-line">
          <p class="newTitle">{{ selectData.name }}</p>
          <span class="title_icon_one">{{ selectData.municipalityName }}</span>
          <span class="title_icon_two">{{ selectData.length }}</span>
        </div>
      </div>

      <div class="monitoring_data" @click="goto('/healthMonitor/statistical')">
        <div class="monitoring_top">
          <Header :src="require('../../../assets/images/homeMap/jkData.png')" :title="'监测数据'" :fbTitle="'monitoring data'"></Header>
        </div>
        <div class="monitoring_img">
          <div class="mmonitor_icon">
            <img src="../../../assets/images/homeMap/icon(6).png" alt />
            <span>桥址环境 ({{ environment }})</span>
          </div>
          <div class="mmonitor_icon">
            <img src="../../../assets/images/homeMap/icon(3).png" alt />
            <span>车辆荷载 ({{ VehicleLoad }})</span>
          </div>
          <div class="mmonitor_icon">
            <img src="../../../assets/images/homeMap/icon(4).png" alt />
            <span>结构响应 ({{ StructuralResponse }})</span>
          </div>
        </div>
        <div class="monitoring_img">
          <div class="mmonitor_icon">
            <img src="../../../assets/images/homeMap/icon(5).png" alt />
            <span>表现状况 ({{ BridgeCondition }})</span>
          </div>
          <div class="mmonitor_icon">
            <img src="../../../assets/images/homeMap/icon(7).png" alt />
            <span>耐久性 ({{ durable }})</span>
          </div>
          <div class="mmonitor_icon">
            <!-- <img src="../../../assets/images/homeMap/icon(6).png" alt />
            <span>局部响应</span> -->
          </div>
        </div>
      </div>
      <div class="report_data" @click="goto('/healthMonitor/WarningList')">
        <div class="monitoring_top">
          <Header :src="require('../../../assets/images/homeMap/icon(1).png')" :title="'告警信息'" :fbTitle="'Warning info'"></Header>
        </div>
        <div class="report">
          <div class="report_left">
            <img src="../../../assets/images/icon/icon_告警.png" alt />
            <div class="icon_left">
              <h4>告警</h4>
              <span>{{ total }}</span>
            </div>
          </div>
          <!-- <div class="report_right">
            <img src="../../../assets/images/icon/icon1.png" alt />
            <div class="icon_right">
              <h4>事件</h4>
              <span>0</span>
            </div>
          </div> -->
        </div>
      </div>
      <!--      <div class="disease_data" @click="goto('/curing/total')">  YU 修改跳转页面-->
      <div class="disease_data" @click="goto('/inspection/inspHistory')">
        <div class="monitoring_top">
          <!-- <img src="../../../assets/images/icon/tubicon.jpg" />
          <h4>病害信息</h4> -->
          <Header :src="require('../../../assets/images/homeMap/bhInfo.png')" :title="'病害信息'" :fbTitle="'Disease treatment'"></Header>
        </div>
        <div style="margin-top: 10px" class="disease">
          <div class="disease_left">
            <span>已处理</span> <br />
            <span>{{ isOk }}</span>
          </div>
          <div class="disease_right">
            <span>未处理</span><br />
            <span>{{ noOk }}</span>
          </div>
        </div>
      </div>
      <div class="polling_data">
        <!--        <div class="monitoring_top" style="margin-top: 10px" @click="goto('/inspection/inspTotal')"> YU 修改跳转页面-->
        <div class="monitoring_top" style="margin-top: 10px" @click="goto('/inspection/inspHistory')">
          <!-- <img src="../../../assets/images/icon/tubicon.jpg" />
          <h4>巡检养护</h4> -->
          <Header :src="require('../../../assets/images/homeMap/巡检养护.png')" :title="'巡检养护'" :fbTitle="'Inspection mainten'"></Header>
        </div>
        <div class="polling_top">
          <div class="polling_left" @click="goto('/inspection/inspTotal')">
            <span>巡检次数</span>
            <span>{{ insp[0] ? insp[0].value : 0 }}</span>
          </div>
          <div class="polling_right">
            <img src="../../../assets/images/home/x.png" alt="" />
          </div>
        </div>
        <div class="polling_top" @click="goto('/curing/total')">
          <div class="polling_left">
            <span>养护次数</span>
            <span style="color: #f5ac42">{{ insp[1] ? insp[1].value : 0 }}</span>
          </div>
          <div class="polling_right">
            <img src="../../../assets/images/home/y.png" alt="" />
          </div>
        </div>
      </div>
      <div class="details">
        <span @click="goBack()">返回 &nbsp; </span>
        <span @click="gotoDetail()">查看详情 &nbsp;></span>
      </div>
    </div>
  </div>
</template>

<script>
import base from '@/api/base'
import Header from './header'
export default {
  props: {
    selectData: {},
  },
  data() {
    return {
      insp: [],
      isOk: '',
      noOk: '',
      total: 0,
      dataList: [],
      selectData: {
        realisticPictureList: [
          {
            id: '',
            path: '',
          },
        ],
        name: '',
        municipalityName: '',
        length: '',
      },
      baseUrl: base.DOWNLOADURL,
      environment: 0, // 桥址环境
      BridgeCondition: 0, // 桥梁表现状况
      durable: 0, // 耐久性
      VehicleLoad: 0, // 车辆荷载
      StructuralResponse: 0, // 结构响应
    }
  },
  components: {
    Header,
  },
  mounted() {},
  methods: {
    goBack() {
      // this.$parent.details()
      this.$emit('details')
    },
    // 跳转
    goto(path) {
      console.log(this.selectData)
      let data = this.selectData.id
      let view = JSON.parse(localStorage.getItem('viewData'))
      view.map((item, key) => {
        if (item.deptResponses[0].code == data) {
          localStorage.setItem('viewIndex', key)
          localStorage.setItem('ownInfo', JSON.stringify(item.deptResponses))
          localStorage.setItem('ownId', item.deptResponses[0].code)
        }
      })
      this.$router.push(path)
    },
    // 查看详情
    gotoDetail() {
      let data = this.selectData.id
      let view = JSON.parse(localStorage.getItem('viewData'))
      view.map((item, key) => {
        if (item.deptResponses[0].code == data) {
          localStorage.setItem('viewIndex', key)
          localStorage.setItem('ownInfo', JSON.stringify(item.deptResponses))
          localStorage.setItem('ownId', item.deptResponses[0].code)
        }
      })
      localStorage.setItem('mapClick', 0)
      this.$router.push('/healthMonitor/RealMonitor')
    },

    // 获取所有告警信息
    getWarning(id) {
      this.$api.mearsuringPointSetting
        .getHomeWarning({
          id: id,
        })
        .then((res) => {
          console.log('告警数据', res)
          let data = res.data.data
          let total = 0
          if (data.length > 0) {
            data.map((item, key) => {
              total += item.count
            })
          }
          this.total = total
        })
    },

    //处理情况
    getTeach(id) {
      this.$api.mearsuringPointSetting
        .getHomeBh({
          status: 0,
          ownId: id,
        })
        .then((res) => {
          console.log('病害wei处理情况', res.data.data)
          this.noOk = res.data.data

          this.$api.mearsuringPointSetting
            .getHomeBh({
              status: 2,
              ownId: id,
            })
            .then((res) => {
              console.log('病害yi处理情况', res.data.data)
              this.isOk = res.data.data
            })
        })
    },
    // 获取巡检养护
    getInsp(id) {
      this.$api.mearsuringPointSetting
        .getHomeInsp({
          id: id,
        })
        .then((res) => {
          console.log('巡检养护次数', res.data.data)
          this.insp = res.data.data
        })
    },
    //监测总览 YU 增加
    queryPointNumberByBridgeId(id) {
      this.$api.healthMonitor
        .countTypePointNumber({
          ownId: id,
        })
        .then((res) => {
          if (res.data.success) {
            let data = res.data.data
            let arr = []
            ;(this.environment = data[0].allNumber), // 桥址环境
              (this.BridgeCondition = data[1].allNumber), // 桥梁表现状况
              (this.durable = data[2].allNumber), // 耐久性
              (this.VehicleLoad = data[3].allNumber), // 车辆荷载
              (this.StructuralResponse = data[4].allNumber), // 结构响应
              console.log(data)
            console.log('dateeeeeeeeeeeeeeeeeeeeeeeeeeeeeea')
            data.map((v) => {
              arr.push(v)
            })
          }
        })
    },
  },
  watch: {
    selectData: {
      handler: function (val) {
        if (val) {
          console.log('详细数据', val)
          this.queryPointNumberByBridgeId(val.id)
          this.selectData = val
          this.getWarning(val.id)
          this.getTeach(val.id)
          this.getInsp(val.id)
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  z-index: 999999999 !important;
  // 标题
  .monitoring_top {
    z-index: 999999999 !important;
    height: 34px;
    // background: rgb(28, 29, 27);
    display: flex;
    align-items: center;
    img {
      height: 20px;
      margin-left: 10px;
    }
    h4 {
      color: #6c6f82;
      margin-left: 8px;
    }
  }
  width: 280px;
  height: calc(100vh - 250px);
  // background: pink;
  display: flex;
  // justify-content: center;
  flex-direction: column;
  // border-bottom: 1px solid #c0c4cc;
  .box_top {
    width: 280px;
    height: 194px;
    background: rgba(51, 89, 115, 0.5);
    margin-bottom: 20px;
    .box-top-line {
      width: 100%;
      margin: 0 auto;
      height: 40px;
      // background:rgba(51, 89, 115,0.5)
      background: url('../../../assets/images/homeMap/line.png') no-repeat center;
      background-size: 100%;
      padding-top: 5px;
      .newTitle {
        text-align: center;
        font-weight: bold;
        color: #c6e5f6;
        background: linear-gradient(0deg, #78a8b7 0%, #ffffff 80.8349609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 18px;
      }
    }
    .picture {
      width: 100%;
      height: 120px;
      // margin: 10px;
      margin-bottom: 0px;
      // border-radius: 5px;
    }
    .title {
      margin-left: 9px;
      font-weight: 600;
    }
    .top_icon {
      margin-left: 9px;
      // background: cyan;
      height: 30px;
      line-height: 30px;
      .title_icon_one {
        width: 56px;
        height: 21px;
        background: #e8e7fc;
        color: #8a81f9;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        line-height: 21px;
        margin-right: 5px;
        border-radius: 20px;
      }
      .title_icon_two {
        width: 56px;
        height: 21px;
        background: #f9eede;
        color: #f6b556;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        line-height: 21px;
        border-radius: 20px;
      }
    }
    .left_bottom {
      margin: 5px 0px 5px 9px;
      span {
        color: #6e6e6e;
      }
    }
  }

  .monitoring_data {
    height: 134x;
    // background: yellow;

    .monitoring_img {
      margin: 10px;
      display: flex;
      .mmonitor_icon {
        text-align: center;
        width: 86px;

        font-weight: bold;
        color: #c6e5f6;

        background: linear-gradient(180deg, #52c8bc 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 12px;
        img {
          margin-left: 18px;
          width: 50px;
          height: 38px;
        }
      }
    }
  }
  .report_data {
    height: 134x;
    .report {
      margin: 10px;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }
    .report_left {
      margin-left: 70px;
      width: 100px;
      height: 50px;
      display: flex;
      align-items: center;
      img {
        display: inline;
        width: 60px;
      }
      .icon_left {
        h4 {
          font-weight: 600;
          color: #666666;
        }
        span {
          font-size: 22px;
          font-weight: 600;
          color: #e62525;
        }
      }
    }
    .report_right {
      margin-right: 15px;
      width: 100px;
      height: 69px;
      display: flex;
      // background: wheat;
      align-items: center;
      img {
        display: inline;
        width: 60px;
      }
      .icon_right {
        h4 {
          font-weight: 600;
          color: #666666;
        }
        span {
          font-size: 22px;
          font-weight: 600;
          color: #327bdc;
        }
      }
    }
  }
  .disease_data {
    height: 82px;
    // background: ;
    .disease {
      margin: 0 10px 0 10px;
      display: flex;
      justify-content: space-between;
      .disease_left {
        width: 50%;
        align-items: center;
        text-align: center;

        font-weight: bold;
        color: #48e9ff;

        background: linear-gradient(0deg, #00a70c 0%, #ffffff 80.8349609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        span:nth-child(2) {
          font-size: 14px;
          margin: 0px 8px 0px 2px;
          // color: #666666;
          display: inline-block;
        }
        span:last-child {
          font-size: 18px;
          // color: #46c667;
        }
      }
      .disease_right {
        text-align: center;

        font-weight: bold;
        color: #ff3a56;

        background: linear-gradient(0deg, #ff0000 0%, #ffffff 80.8349609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        span:nth-child(2) {
          font-size: 14px;
          margin: 0px 8px 0px 2px;
          color: #666666;
          display: inline-block;
        }
        span:last-child {
          font-size: 18px;
          color: #f5ac42;
        }
      }
    }
  }
  .polling_data {
    height: 204px;
    // background: white;
    .polling_top {
      margin-bottom: 10px;
      margin: 0 10px 0 10px;
      height: 50px;
      margin-top: 5px;
      display: flex;
      text-align: center;
      justify-content: space-between;
      display: flex;
      .polling_left {
        margin-left: 5px;
        margin-top: 2px;
        width: 80px;
        font-weight: bold;
        color: #059bcc;
        background: linear-gradient(0deg, #059bcc 0%, #ffffff 80.8349609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        span:first-child {
          color: #666666;
          font-size: 14px;
          display: block;
          font-weight: 600;
        }
        span:last-child {
          color: #7a70f6;
          font-size: 18px;
          display: block;
          font-weight: 600;
        }
      }
      .polling_right {
        width: 190px;
        text-align: center;
        font-weight: bold;
        color: #57ba91;
        background: linear-gradient(0deg, #00d30f 0%, #ffffff 80.8349609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        img {
          margin-top: 10px;
          margin-left: 10px;
        }
      }
    }
  }
  .details {
    padding: 0 10px 0 10px;
    text-align: right;
    // color: #327bdc;
    line-height: 60px;
    cursor: pointer;

    font-weight: bold;
    color: #c6e5f6;

    background: linear-gradient(0deg, #78a8b7 0%, #ffffff 80.8349609375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.title_icon_one {
  position: relative;
  left: 10px;
  top: -20px;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
}
.title_icon_two {
  position: relative;
  left: 185px;
  top: -20px;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
}
</style>
